<template>
  <div class="assets-panel" v-loading="loading">
    <!-- 分类展示 -->
    <AssetCategoryDisplay
      :category-data="categoryData"
      :typeList="categoryList"
      @item-click="itemClick"
    />

    <!-- 流转记录 -->
    <AssetFlowRecord
      :flow-tabs="flowTabs"
      :flow-data="flowData"
      :typeList="categoryList"
      :loading="recordLoading"
      @tab-change="handleFlowTabChange"
    />

    <!-- 图表统计 -->
    <AssetChartStatistics
      v-if="refreshKey === 'fixed'"
      :bar-chart-raw-data="barChartRawData"
      :pie-chart-data="pieChartRawData"
      :barSeriesMap="['报修', '报废']"
      :is-fixed-assets="true"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { AssetsFixedApi } from '@/api/school/assets/fixed'
import { AssetsFlowApi } from '@/api/school/assets/flow'
import { AssetsCategoryApi } from '@/api/school/assets/category'
import AssetCategoryDisplay from './AssetCategoryDisplay.vue'
import AssetFlowRecord from './AssetFlowRecord.vue'
import AssetChartStatistics from './AssetChartStatistics.vue'

defineProps<{
  refreshKey?: string
}>()
const { push } = useRouter()
// 分类数据
const categoryList = ref<any[]>([])
const categoryData = ref<any[]>([])
const loading = ref(true)
// 流转Tab
const flowTabs = [
  { oper: 'putin', label: '入库', path: '/asset/fixed/putin' },
  { oper: 'returns', label: '归还', path: '/asset/fixed/returns' },
  { oper: 'borrow', label: '领用', path: '/asset/fixed/borrow' },
  { oper: 'fix', label: '报修', path: '/asset/fixed/fix' },
  { oper: 'scrap', label: '报废', path: '/asset/fixed/scrap' },
  { oper: 'reputin', label: '重新入库', path: '/asset/fixed/reputin' }
]

// 流转数据
const flowData = ref<Record<string, any[]>>({})
const recordLoading = ref(false)
// 图表相关原始数据
const barChartRawData = ref<any[]>([])
const pieChartRawData = ref<any[]>([])

// 处理流转Tab切换
const handleFlowTabChange = (oper: string) => {
  if (!flowData.value[oper] || flowData.value[oper].length === 0) {
    loadFlowData(oper)
  }
}
// 加载分类列表
const loadCategoryList = async () => {
  try {
    const list = await AssetsCategoryApi.getSimpleAssetsCategoryList({
      assetType: 0 // 固定资产
    })
    categoryList.value = list
  } catch (err) {
    console.error('加载消耗品管理分类列表失败:', err)
  }
}
// 加载分类数据
const loadCategoryData = async () => {
  try {
    const res = await AssetsFixedApi.getAssetsFixedList()
    categoryData.value = res.map((item: any, index: number) => ({
      ...item,
      index: index + 1
    }))
  } catch (err) {
    console.error('加载固定资产管理分类数据失败:', err)
  }
}

// 加载流转数据
const loadFlowData = async (oper: string) => {
  try {
    recordLoading.value = true
    const res = await AssetsFlowApi.getAssetsFlowPage({
      oper,
      assetType: 0, // 固定资产
      pageNo: 1,
      pageSize: 8
    })

    flowData.value[oper] = res.list.map((item: any, index: number) => ({
      ...item,
      index: index + 1
    }))
  } catch (err) {
    console.error(`加载固定资产管理${oper}数据失败:`, err)
  } finally {
    recordLoading.value = false
  }
}

// 加载柱状图数据
const loadBarChartData = async () => {
  try {
    const year = new Date().getFullYear().toString()
    const res = await AssetsFixedApi.getAssetsFixedReportByYear(year)
    barChartRawData.value = res
  } catch (err) {
    console.error('加载固定资产管理柱状图数据失败:', err)
  }
}

// 加载饼图数据
const loadPieChartData = async () => {
  try {
    const res = await AssetsFixedApi.getAssetsFixedReportByFlow()
    pieChartRawData.value = res
  } catch (err) {
    console.error('加载固定资产管理饼图数据失败:', err)
  }
}

// 物品点击
const itemClick = ({ categoryId }) => {
  push({
    path: `/asset/fixed/assets-fixed`,
    query: {
      currentCategoryId: categoryId
    }
  })
}
// 初始化数据
onMounted(async () => {
  loading.value = true
  try {
    await Promise.all([
      loadCategoryList(),
      loadCategoryData(),
      loadBarChartData(),
      loadPieChartData()
    ])
  } finally {
    loading.value = false
  }

  // 加载第一个Tab的流转数据
  loadFlowData(flowTabs[0].oper)
})
</script>

<style scoped lang="scss">
.assets-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
